テンプレート・・002

日本最大級の通信販売ショッピング／通販オンラインショップ
あなたのネット生活に役立つ情報が、きっと得られます!!

■■テンプレート・・002

大きなテンプレート(テーブル)のセルの中にアクセントとして別のテーブルを入れ子にするときにも使えるけど～
テーブルタグの幅を大きく設定し列・行を増やせば、フリーページでも使えるレイアウトになってきますよ～
このテーブルタグは、沢山の商品画像を表示させたいときに便利なテーブルタグですよ～

ほのぼの家具

<table border="0" cellspacing="1" width="200" bgcolor="#DD9E13"> <tr><td colspan="2" bgcolor="#DD9E13" align="center"><font color="#ffffff">商品タイトル<font> </td></tr> <tr><td bgcolor="#ffffff" height="80" align="center"> 画像リンク1 </td><td bgcolor="#ffffff" align="center"> 画像リンク2 </td></tr> <tr><td bgcolor="#ffffff" height="80" align="center"> 画像リンク3 </td><td bgcolor="#ffffff" align="center"> 画像リンク4 </td></tr> </table>

これも実際にトップのフリーページに使用しているものです｡
紹介する商品のイメージにあわせて、テーブルの色を変えて使用するといいかも～
色は、トップページのBookmarks>>良く行くページ>>色にょろの色ページ、
Mariのいろえんぴつさんのサイトが参考になりますよ～
cellspacing="1"の数字を大きくしていくと枠線が太くなっていきます・・

ほのぼの家具

<table border="0" cellspacing="0" width="200" bgcolor="#DD9E13"> <tr><td colspan="2" bgcolor="#DD9E13" align="center"><font color="#ffffff">商品タイトル<font> </td></tr> <tr><td bgcolor="#ffffff" height="80" align="center"> 画像リンク1 </td><td bgcolor="#ffffff" align="center"> 画像リンク2 </td></tr> <tr><td bgcolor="#ffffff" height="80" align="center"> 画像リンク3 </td><td bgcolor="#ffffff" align="center"> 画像リンク4 </td></tr> </table>

テーブルタグの中のcellspacing="1"を0にすると枠線が消えます・・
・・・テーブルタグの中の色指定を無くすだけでも枠線が消えます・・・
ここではセルの中の色指定を#ffffffと白に指定していますが・・
これも削除してしまえばバックはbodyのcolorと一緒になります・・

ほのぼの家具

<table border="0" cellspacing="2" width="200"> <tr><td colspan="2" bgcolor="#DD9E13" align="center"><font color="#ffffff">商品タイトル<font> </td></tr> <tr><td bgcolor="#efefd7" height="80" align="center"> 画像リンク1 </td><td bgcolor="#efefd7" align="center"> 画像リンク2 </td></tr> <tr><td bgcolor="#efefd7" height="80" align="center"> 画像リンク3 </td><td bgcolor="#efefd7" align="center"> 画像リンク4 </td></tr> </table>

テーブルタグの中のcellspacing="1"をcellspacing="2"に指定し、色指定をしないと透明の太い枠線を表示できます｡
あとはセルの中を好きな色に指定していくと・・枠線のないテーブルが出来上がります｡
これも、テーブルタグの幅を大きく設定し列・行を増やせば、フリーページでも使えるレイアウトになってきますよね～

▼▼こんなんで満足しないよ～って時には▼▼